<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link type="text/css" th:href="@{../assets/dist/css/bootstrap.min.css}" rel="stylesheet">
    <script th:src="@{../assets/jquery/jquery.js}"></script>
    <script type="text/javascript" th:src="@{../assets/dist/js/bootstrap.bundle.min.js}"></script>

    <style>
        body {
            padding-top: 70px; /* 通过增加顶部padding来向下移动整个页面内容 */
            background-size:100%;
        }

        .container {
            margin-top: 70px; /* 通过增加顶部margin来向下移动特定的容器 */
        }

        /* 添加以下样式来向右移动登录框 */
        .modal-dialog {
            margin-right: 40px; /* 设置左边距为auto，使登录框向右移动 */
        }
    </style>
    <title>Title</title>
</head>
<body th:style="'background-image: url(../assets/images/backgrounds/img5.png)'">
<div class="modal modal-signin position-static d-block  py-5" tabindex="-1" role="dialog" id="modalSignin">
    <div class="modal-dialog" role="document">
        <div class="modal-content rounded-4 shadow">
            <div class="modal-header p-5 pb-4 border-bottom-0">
                <!-- <h1 class="modal-title fs-5" >Modal title</h1> -->
                <h1 class="fw-bold mb-0 fs-2">密码登录</h1>
            </div>

            <div class="modal-body p-5 pt-0">
                <form class="">
                    <div class="form-floating mb-3">
                        <input type="text" class="form-control rounded-3" id="floatingInput" placeholder="账号" name="username">
                        <label for="floatingInput">账号</label>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="password" class="form-control rounded-3" id="floatingPassword" placeholder="密码" name="password">
                        <label for="floatingPassword">密码</label>
                    </div>
                    <button class="w-100 mb-2 btn btn-lg rounded-3 btn-primary" type="submit">登录</button>
                    <div class="form-group">
                        <div class="custom-control custom-radio mb-3">
                            <input type="radio" name="custom-radio-1"  class="custom-control-input" id="customRadio2" checked="">
                            <label class="custom-control-label" for="customRadio2">
                                已阅读并同意<a th:href="@{/to/protocal}">《电竞社交平台用户协议》</a>
                            </label>
                        </div>
                    </div>
                    <hr class="my-4">
                    <h2 class="fs-5 fw-bold mb-3">其他登录方式</h2>
                    <a th:href="@{/to/loginByEmail}" class="text-white">
                    <button class="w-100 py-2 mb-2 btn btn-outline-primary rounded-3" type="button">
                        <svg class="bi me-1" width="16" height="16"></svg>
                        验证码登录
                    </button>
                    </a>
                    <hr class="my-4">
                    <h2 class="fs-5 fw-bold mb-3">用户注册</h2>
                    <a th:href="@{/to/register}" class="text-white">
                    <button class="w-100 py-2 mb-2 btn btn-outline-primary rounded-3" type="button">
                        <svg class="bi me-1" width="16" height="16"></svg>
                        用户注册
                    </button>
                    </a>
                </form>
<!--                <img th:src="@{../assets/images/backgrounds/img4.png}">-->
            </div>
        </div>
    </div>
</div>

</body>
</html>
